<template>
  <div class="payment-config">
    <!-- 溫馨提示 -->
    <div class="tips-box">
      <el-icon><InfoFilled /></el-icon>
      <span class="tips-text">温馨提示：设置订单的支付方式</span>
    </div>

    <!-- 支付方式列表 -->
    <el-table :data="paymentMethods" style="width: 100%" border>
      <el-table-column prop="type" label="支付方式" width="180" />
      <el-table-column prop="name" label="显示名称" width="180" />
      <el-table-column label="图标" width="180">
        <template #default="scope">
          <div class="payment-icon" :class="scope.row.iconClass">
            <img :src="scope.row.icon" :alt="scope.row.name" class="icon-image" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="开启状态" width="180">
        <template #default="scope">
          <el-switch v-model="scope.row.enabled" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-link type="primary" @click="handleConfig(scope.row)">配置</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 配置窗 -->
    <el-dialog
      v-model="configDialogVisible"
      :title="currentPayment?.name + '配置'"
      width="500px"
    >
      <el-form :model="configForm" label-width="120px">
        <el-form-item label="商户号">
          <el-input v-model="configForm.merchantId" placeholder="请输入商户号" />
        </el-form-item>
        <el-form-item label="商户密钥">
          <el-input v-model="configForm.merchantKey" placeholder="请输入商户密钥" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="configDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveConfig">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import payoneIcon from '@/assets/images/payone.png'
import paytwoIcon from '@/assets/images/paytwo.png'
import paythreeIcon from '@/assets/images/paythree.png'

/**
 * 此页面对应系统管理下的 支付配置
 */


interface PaymentMethod {
  type: string
  name: string
  icon: string
  iconClass: string
  enabled: boolean
}

// 支付方式數據
const paymentMethods = ref<PaymentMethod[]>([
  {
    type: '企业二维码支付',
    name: '二维码支付',
    icon: payoneIcon,
    iconClass: 'qr-pay',
    enabled: true
  },
  {
    type: '微信支付',
    name: '微信支付',
    icon: paytwoIcon,
    iconClass: 'wechat-pay',
    enabled: false
  },
  {
    type: '支付宝支付',
    name: '支付宝支付',
    icon: paythreeIcon,
    iconClass: 'alipay',
    enabled: false
  }
])

// 配置相關
const configDialogVisible = ref(false)
const currentPayment = ref<PaymentMethod | null>(null)
const configForm = ref({
  merchantId: '',
  merchantKey: ''
})

// 打開配置彈窗
const handleConfig = (row: PaymentMethod) => {
  currentPayment.value = row
  configDialogVisible.value = true
  // 實際應用中這裡應該調用接口獲取當前配置
  configForm.value = {
    merchantId: '',
    merchantKey: ''
  }
}

// 保存配置
const handleSaveConfig = () => {
  // 實際應用中這裡應該調用接口保存配置
  ElMessage.success('配置保存成功')
  configDialogVisible.value = false
}
</script>

<style scoped>
.payment-config {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
}

.tips-box {
  background-color: #fff9e6;
  border: 1px solid #ffe6a6;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tips-box .el-icon {
  color: #e6a23c;
  font-size: 16px;
}

.tips-text {
  color: #666;
  font-size: 14px;
}

.payment-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.payment-icon.qr-pay {
  /* background-color: #ffa940; */
}

.payment-icon.wechat-pay {
  /* background-color: #52c41a; */
}

.payment-icon.alipay {
  /* background-color: #1677ff; */
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 500;
}

:deep(.el-switch__core) {
  background-color: #dcdfe6;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #4066FF;
}

:deep(.el-button--primary) {
  --el-button-bg-color: #4066FF;
  --el-button-border-color: #4066FF;
  --el-button-hover-bg-color: #5C7CFF;
  --el-button-hover-border-color: #5C7CFF;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 